<template>
  <div class="count">
    <div v-for="(item, index) in list" :key="index" class="type">
      <i class="icon" :class="'icon' + `${index}`"></i>
      <div class="info">
        <span class="name">{{ item.name }}</span>
        <span class="number">{{ formatNumThousand(item.value) }}<span class="unit">辆</span></span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([
  {
    name: '详情数据1',
    value: 123456
  },
  {
    name: '详情数据2',
    value: 24562
  },
  {
    name: '详情数据3',
    value: 36512
  },
  {
    name: '详情4',
    value: 13456
  },
  {
    name: '数据5',
    value: 6988
  },
  {
    name: '其它',
    value: 216
  }
])
const formatNumThousand = (num) => {
  return (num + '').replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
}
function setClass(val) {
  return 'icon' + val
}
</script>

<style scoped lang="scss">
.count {
  height: 2.64rem;
  padding: 0.2rem 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .type {
    width: 1.98rem;
    height: 0.7rem;
    padding-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    .icon {
      width: 0.23rem;
      height: 0.28rem;
      margin-top: 0.2rem;
      background: url('../../../assets/images/home/icon-bus.png');
      background-size: 100%;
    }
    .info {
      width: 1.54rem;
      height: 0.7rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 0.16rem;
        width: 1.64rem;
        padding-top: 0.04rem;
      }
      .number {
        font-size: 0.26rem;
        //padding-top: 0.1rem;
        color: #18ebfe;
      }
      .unit {
        font-size: 0.14rem;
        margin-left: 0.06rem;
      }
    }
    .icon2 {
      background: url('../../../assets/images/home/icon-bus.png') no-repeat center center/100% 100%;
    }
  }
}
</style>
